<template>
    <span :class="canSend ? 'c-blue' : 'c-gray'" @click="onSend">{{name}}</span>
</template>
<script>
    export default {
        props:{
            value: {
                type: Boolean,
                default: () => true,
            },  
            phone: {
                type: String
            }          
        },
        data() {
            return {
                canSend: true,
                timeout: '',
                interval: null,
                count: 60,
                name: '发送验证码',
            }
        },
        methods:{
            onSend(){
                if(!this.$verify.mobile(this.phone)){
                  return;
                }
                if(this.count < 60){
                    return;
                }
                if(this.timeout){
                    clearTimeout(this.timeout)
                }
                this.$emit('send');
            },
            countDown(){
                this.timeout = setTimeout(() => {
                    this.count --;
                    this.name = this.count + '秒后重新发送';
                    if(this.count == 59){
                        this.canSend = false;
                        this.$emit('update:value', false);
                        this.interval = setInterval(() => {
                            this.count --;
                            this.name = this.count + '秒后重新发送';
                            if(this.count == 0){
                                this.count = 60;
                                this.name = '发送验证码'
                                clearInterval(this.interval);
                                this.interval = '';
                                this.$emit('update:value', true);
                                this.canSend = true;
                            }
                        },1000)
                    }
                },100);
                
            }
        }
    }
</script>
